<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<script src="calendar_framework/dhtmlxscheduler.js"
	type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="calendar_framework/dhtmlxscheduler.css"
	type="text/css" media="screen" title="no title" charset="utf-8">


<style type="text/css" media="screen">
html,body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow: hidden;
}

/*event in day or week view*/
.dhx_cal_event.past_event div {
	background-color: purple !important;
	color: white !important;
}

/*multi-day event in month view*/
.dhx_cal_event_line.past_event {
	background-color: purple !important;
	color: white !important;
}

/*event with fixed time, in month view*/
.dhx_cal_event_clear.past_event {
	color: purple !important;
}
</style>

<script type="text/javascript" charset="utf-8">

	var eventlaoding = false;
	var eventId;
	var clickEventId;

	function init() {

		scheduler.config.api_date = "%Y-%m-%d %H:%i";
		scheduler.init('scheduler_here', null, "week");
		scheduler.templates.event_text=function(start,end,event){
	        return event.text+"<br><br>"+"Joined:"+event.join_user;
	    };
		scheduler.templates.event_class=function(start,end,event){
	 		   if (start < (new Date())) //if date in past
	        	  return "past_event"; //then set special css class for it
		};
		scheduler.locale.labels.section_join = "Joined User";
		scheduler.locale.labels.button_join = "Join";
		scheduler.form_blocks["readonlytextarea"]={
				render:function(sns){
			        var A = (sns.height || "130") + "px";
		         	return "<div id='joinbox' class='dhx_cal_ltext' style='height:" + A
					+ ";'><textarea></textarea></div>";
				},
				set_value:function(node,value,ev){
					node.firstChild.value = value || "";
					node.firstChild.disabled = true;
				},
				get_value:function(node,ev){
					return node.firstChild.value;
				},
				focus:function(node){
					var A = node.firstChild;
					A.select();
					A.focus();
				},
				button_click:function(index, src, sec, data){
				    req.open("POST", url, true);
					req.setRequestHeader("Content-Type",
								"application/x-www-form-urlencoded");
					req.onreadystatechange = joinEvent_lightBox;
					req.send("type=join&id=" + eventId);
		        }
			};
		scheduler.config.lightbox.sections=[	
				{ name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
				{ name:"join", height: 50, map_to:"join_user", type:"readonlytextarea", button:"join"},
				{ name:"time", height:72, type:"time", map_to:"auto"}	
		];
		var url = "ajaxservlet";
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);
		req.onreadystatechange = loadEvents;
		req.send(null);

		scheduler.attachEvent("onEventAdded", function(event_id, event_object) {
			if (!eventloading) {
				//alert("event add");
				eventId = event_id;
				event_object.join_user = "{}";
				scheduler.updateEvent(event_id);
				req.open("POST", url, true);
				req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded");
				req.onreadystatechange = addEvent;
				var sm = event_object.start_date.getMonth() + 1;
				var sd = event_object.start_date.getYear() + "-" + sm + "-"
						+ event_object.start_date.getDate() + " "
						+ event_object.start_date.getHours() + ":"
						+ event_object.start_date.getMinutes();

				var em = event_object.end_date.getMonth() + 1;
				var ed = event_object.end_date.getYear() + "-" + em + "-"
						+ event_object.end_date.getDate() + " "
						+ event_object.end_date.getHours() + ":"
						+ event_object.end_date.getMinutes();
				//alert(sd);
				//alert(ed);
				req.send("type=add&start=" + sd + "&end=" + ed + "&text="
						+ event_object.text);
			}
		});

		scheduler.attachEvent("onEventChanged",
				function(event_id, event_object) {
					//alert("event changed");
					//alert(event_id);
					req.open("POST", url, true);
					req.setRequestHeader("Content-Type",
							"application/x-www-form-urlencoded");
					var sm = event_object.start_date.getMonth() + 1;
					var sd = event_object.start_date.getYear() + "-" + sm + "-"
							+ event_object.start_date.getDate() + " "
							+ event_object.start_date.getHours() + ":"
							+ event_object.start_date.getMinutes();

					var em = event_object.end_date.getMonth() + 1;
					var ed = event_object.end_date.getYear() + "-" + em + "-"
							+ event_object.end_date.getDate() + " "
							+ event_object.end_date.getHours() + ":"
							+ event_object.end_date.getMinutes();
					//alert(sd);
				//alert(ed);
				req.send("type=update&id=" + event_id + "&start=" + sd
						+ "&end=" + ed + "&text=" + event_object.text);
			});

		scheduler.attachEvent("onBeforeEventDelete", function(event_id,
				event_object) {
			//alert("event delete");
			//alert(event_id);
			req.open("POST", url, true);
			req.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			req.send("type=delete&id=" + event_id);
			return true;
		});

		scheduler.attachEvent("onContextMenu", function (event_id, native_event_object){
             if(event_id !=null){
		       //alert("Join Event");
		       eventId = event_id;
		       req.open("POST", url, true);
			   req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded");
			   req.onreadystatechange = joinEvent;
			   req.send("type=join&id=" + event_id);
             }
		     return true;
		});

		scheduler.attachEvent("onBeforeLightbox", function (event_id){
		       eventId = event_id;
		       return true;
		});

		scheduler.attachEvent("onClick", function (event_id, native_event_object){
		       clickEventId = event_id;
		       return true;
		 });
	}

	function loadEvents() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				//alert("response success");
				eventloading = true;
				xmlDoc = req.responseXML;
				var editable = xmlDoc.getElementsByTagName("editable");
				if (editable[0].firstChild.nodeValue == "false") {
					scheduler.config.readonly = false;
				} else {
					scheduler.config.readonly = true;
				}
				var elements = xmlDoc.getElementsByTagName("event");
				//alert(req.responseText);
				for ( var i = 0; i < elements.length; i++) {
					scheduler.addEvent(
							elements[i].childNodes[0].firstChild.nodeValue,
							elements[i].childNodes[1].firstChild.nodeValue,
							elements[i].childNodes[2].firstChild.nodeValue,
							elements[i].childNodes[3].firstChild.nodeValue,
							{join_user:elements[i].childNodes[4].firstChild.nodeValue});
				}
				eventloading = false;
			}
		}
	}

	function addEvent() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				xmlDoc = req.responseXML;
				var elements = xmlDoc.getElementsByTagName("id");
				scheduler.changeEventId(eventId,
						elements[0].firstChild.nodeValue);
			}
		}
	}

	function joinEvent() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				xmlDoc = req.responseXML;
				//alert(req.reponseTest);
				var elements = xmlDoc.getElementsByTagName("join_user");
				//alert(elements[0].firstChild.nodeValue);
				scheduler.getEvent(eventId).join_user = elements[0].firstChild.nodeValue;
				scheduler.updateEvent(eventId);
			}
		}
	}
	
	function joinEvent_lightBox() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				xmlDoc = req.responseXML;
				//alert(req.reponseText);
				var elements = xmlDoc.getElementsByTagName("join_user");
				//alert(elements[0].firstChild.nodeValue);
				scheduler.getEvent(eventId).join_user = elements[0].firstChild.nodeValue;
				scheduler.updateEvent(eventId);
				document.getElementById("joinbox").firstChild.firstChild.nodeValue =
					elements[0].firstChild.nodeValue;
			}
		}
	}

	function copy () {
       if(clickEventId == null){
           alert("Please select a event!");
       } else {
   		   var url = "ajaxservlet";
		   if (window.XMLHttpRequest) {
	    		reqCopy = new XMLHttpRequest();
	    	} else if (window.ActiveXObject) {
		    	reqCopy = new ActiveXObject("Microsoft.XMLHTTP");
	    	}
    	   reqCopy.open("POST", url, true);
		   reqCopy.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
		   reqCopy.send("type=copy&id=" + clickEventId);
       }
	}

	function paste () {
		var url = "ajaxservlet";
		if (window.XMLHttpRequest) {
			reqPaste = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			reqPaste = new ActiveXObject("Microsoft.XMLHTTP");
		}
 	   reqPaste.open("POST", url, true);
	   reqPaste.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
       reqPaste.onreadystatechange = pasteEvent;
	   reqPaste.send("type=paste");
	}

	function pasteEvent (){
		if (reqPaste.readyState == 4) {
			if (reqPaste.status == 200) {
				xmlDoc = reqPaste.responseXML;
				//alert(req.reponseTest);
				var elements = xmlDoc.getElementsByTagName("event");
				if(elements.length == 0){
                    alert("no copied event!");
				} else{
					//alert(reqPaste.responseText);
					var event = scheduler.getEvent(elements[0].childNodes[3].firstChild.nodeValue);
					if(event==null){
				    eventloading = true;
					scheduler.addEvent(
							elements[0].childNodes[0].firstChild.nodeValue,
							elements[0].childNodes[1].firstChild.nodeValue,
							elements[0].childNodes[2].firstChild.nodeValue,
							elements[0].childNodes[3].firstChild.nodeValue,
							{join_user:elements[0].childNodes[4].firstChild.nodeValue});
					eventloading = false;
					}
				}
			}
		}
	}
</script>

<body onload="init();" oncontextmenu="return false;">
<input type="button" onclick = "copy();" value="copy event"></input><input type="button" onclick = "paste();" value="paste event"><br>
<div id="scheduler_here" class="dhx_cal_container"
	style='width: 100%; height: 100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">&nbsp;</div>
<div class="dhx_cal_next_button">&nbsp;</div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right: 76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
</body>
</html>